<!--
 描述: 环形气泡图
 作者: Jack Chen
 日期: 2020-04-29
-->

<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">事件上传类型分布</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="chart_pin"></div>
          <div class="updef"></div>
          <div class="definfo definfo0"><span>8个</span><span></span></div>
          <div class="definfo definfo1"><span>10个</span><span></span></div>
          <div class="definfo definfo2"><span>35个</span><span></span></div>
          <div class="definfo definfo3"><span>38个</span><span></span></div>
          <div class="definfo definfo4"><span>48个</span><span></span></div>
          <div class="definfo definfo5"><span>55个</span><span></span></div>
          <div class="definfo definfo6"><span>42个</span><span></span></div>
          <div class="definfo definfo7"><span>95个</span><span></span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ringPin",
  data() {
    return {
      option: null,

    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_pin'));
        let scaleData = [{
            name: '占道经营',
            value: 5
        },{
            name: '公共设施损毁',
            value: 10
        },{
            name: '违法建设',
            value: 10
        },{
            name: '不文明现象',
            value: 10
        },{
            name: '扰民事件',
            value: 5
        }];
        let rich = {
            white: {
                color: '#ddd',
                align: 'center',
                padding: [3, 0]
            }
        };
        let placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        };
        let data = [];
        let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800']
        for (let i = 0; i < scaleData.length; i++) {
            data.push({
                value: scaleData[i].value,
                name: scaleData[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 6,
                        shadowBlur: 10,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 2,
                name: '',
                itemStyle: placeHolderStyle
            });
        }

        this.option = {
            series: [{
                name: '',
                type: 'pie',
                clockWise: false,
                radius: ['70%', '72%'],
                center: ['50%', '50%'],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: (params) => {
                                let percent = 0;
                                let total = 0;
                                for (let i = 0; i < scaleData.length; i++) {
                                    total += scaleData[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== '') {
                                    return params.name + '\n{white|' + '占比' + percent + '%}';
                                } else {
                                    return '';
                                }
                            },
                            rich: rich
                        },
                        labelLine: {
                            length: 10,
                            length2: 30,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: data
            }]
        }

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 1473px;
  top: 44px;
  width: 435px;
  height: 30%;
  .chartsdom {
    left: 23px;
    top: 15px;
    width: 100%;
    height: 90%;
  }


}
</style>
